<template>
  <h1>Hello Vue3</h1>
  <h2>{{ user.name }}</h2>
  <h3>{{ name }}</h3>
  <button @click="user.name += '~'">改名字</button>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'

const user = ref({
  name: 'zs',
  age: 18,
})

// ❌ 直接解构失去响应式
// const { name } = user.value

// ✅ 使用 toRefs 可以保证该对象展开的每个属性都是响应式的
const { name } = toRefs(user.value)
console.log(name.value)

// 📝练习：自己试一下通过 reactive 定义响应式对象再解构属性，注意解构后属性需保持响应式
</script>
